<template>
	<view class="zone">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="main">
			<image class="bg" src="http://image.qxgm.site/tdz/img/equip/bg.png" mode="widthFix"></image>

			<view :class="['part','part'+item.id,level < item.lv?'vis':'']" v-for="(item,index) in family" :key="index"
				@click="navgato(item)">
				<view class="name">
					{{item.name}}
				</view>
			</view>

			<view :class="['name2','weizhi'+item.id]" v-for="(item,index) in family" :key="'index'+index">
				{{item.info}}
			</view>

		</view>


		<u-tabbar v-model="current" :border-top="false" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/1.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/11.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/home',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/2.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/22.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/experience',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/4.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/44.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/equip',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/3.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/33.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/game',
					}
				],
				current: 1,
				level: uni.getStorageSync('userinfo'),
				userinfo: uni.getStorageSync('userinfo'),
				family: [{
						id: 1,
						lv: 13,
						info: '元婴期解锁',
						name: '道侣',
						go: '/pages/index/daoistCouple'
					},
					{
						id: 2,
						lv: 25,
						info: '合体期解锁',
						name: '法阵',
						go: '/pages/index/zhenfa'
					},
					{
						id: 3,
						lv: 5,
						info: '筑基期解锁',
						name: '灵宠',
						go: '/pages/index/lingchong?id=' + 1
					},
					{
						id: 4,
						lv: 5,
						info: '筑基期解锁',
						name: '炼丹',
						go: '/pages/index/alchemy'
					},
					{
						id: 5,
						lv: 9,
						info: '结丹期解锁',
						name: '装备',
						go: '/pages/index/equipment'
					},
					{
						id: 6,
						lv: 13,
						info: '化神期解锁',
						name: '坐骑',
						go: '/pages/index/lingchong?id=' + 2
					},
					{
						id: 7,
						lv: 21,
						info: '炼虚期解锁',
						name: '法器',
						go: '/pages/index/equipment'
					},
					{
						id: 8,
						lv: 9,
						info: '结丹期解锁',
						name: '药园',
						go: '/pages/index/MedField'
					},
				],
			};
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				this.level = uni.getStorageSync('userinfo').level
				// console.log(this.userinfo,this.level);
			},
			navgato(item) {
				if (this.level >= item.lv) {
					this.$p.navto(item.go)
				} else {
					this.$u.toast(item.info)
				}
			}
		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url('http://image.qxgm.site/tdz/img/public/p_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.main {
		position: relative;
		padding: 0 0 0px;
	}

	.bg {
		width: 100%;
	}

	.part {
		display: flex;
		flex-direction: column;
		position: absolute;

		.name {
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			/* align-content: center; */
			/* vertical-align: middle; */
			justify-content: center;
			font-weight: normal;
			width: 32px;
			height: 90px;
			font-size: 13px;
			color: #CC6600;
			background: url(http://image.qxgm.site/tdz/img/equip/title.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.name2 {
		position: absolute;
		width: 81px;
		font-weight: normal;
		text-align: center;
		font-size: 12px;
		color: #FFFFFF;
		line-height: 12px;
		padding: 4px 0 3px;
		background: url(http://image.qxgm.site/tdz/img/equip/heng.png) no-repeat;
		background-size: 100% 100%;
	}

	.weizhi1 {
		top: 40%;
		left: 1%;
	}

	.weizhi2 {
		top: 32%;
		left: 44%;
	}

	.weizhi3 {
		top: 36%;
		right: 5%;
	}

	.weizhi4 {
		top: 55%;
		left: 5%;
	}

	.weizhi5 {
		top: 56%;
		right: 10%;
	}

	.weizhi6 {
		top: 71%;
		left: 9%;
	}

	.weizhi7 {
		top: 73%;
		left: 39%;
	}

	.weizhi8 {
		top: 75%;
		right: 5%;
	}

	.part1 {
		top: 22%;
		left: 17%;
	}

	.part2 {
		top: 18%;
		left: 53%;
	}

	.part3 {
		top: 23%;
		right: 5%;
	}

	.part4 {
		top: 43%;
		left: 23%;
	}

	.part5 {
		top: 39%;
		right: 8%;
	}

	.part6 {
		top: 60%;
		left: 9%;
	}

	.part7 {
		top: 54%;
		left: 54%;
	}

	.part8 {
		top: 63%;
		right: 11%;
	}

	.vis {
		filter: grayscale(100%);
	}
</style>